<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>王者荣耀搜索框</title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			.web{		
				background:lightgoldenrodyellow;
				height:100px;
				width: 100%;
				text-align: center;
				line-height: 100px;
			}
			#sh{
				display: inline-block;
				height: 20px;
				padding:9px 0 9px 20px;
				vertical-align: middle;
				font-size: 14px;
				border: none;
			}
			#sh:focus{
				outline: none;
			}
			.herosearch{
				display: inline-block;
				background: white;
				border: 1px solid #ddd;
				font-size: 0;
				line-height: 30px;
				width: 250px;
				height: 40px;
				line-height: 40px;
				vertical-align: middle;
				
			}
			.search{
				border: none;
				height: 20px;
				background-color: white;
				vertical-align: middle;
				border-left:1px solid #ddd ;
				
			}
			.search:visited{
				outline: none;
			}
			.search:hover{
				outline: none;
				cursor: pointer;
			}
			.search:active{
				outline: none;
			}
			.search>img{
				width: 80%;
				padding-left:10px ;
			}
		</style>
	</head>
	<body>
		<div class="web">
			<div class="herosearch">
				<form action="">				
					<input id="sh" type="text" placeholder="请输入想要查询的英雄名"/>
					<button class="search"><img src="img/search_icon.png" alt="" /></button>
				</form>
			</div>
		</div>
	</body>
</html>
